<template>
	<view class="content" v-if="pageShow">
		<view class="padding">
			<!-- state -> 1=待支付,2=待发货,3=待收货,4=待评论,6=已完成,7=已取消 -->
			<!-- refund_status -> 0=未退款,1=退款中,2=待退货,3=退款完成,4=退款关闭,5=退款被拒 -->
			<!-- state ->  0=申请退款,1=卖家同意,2=卖家拒绝,3=申请平台介入,4=成功退款,5=退款已关闭,6=已提交物流,7=第三方退款中,8=退款失败 -->
			<view class="">
				<!-- 订单状态 -->
					<view class="bigtext" v-if="refundorderDetail.state==0">等待商家处理</view>
					<view class="bigtext" v-if="refundorderDetail.state==1">等待买家寄回</view>
					<view class="bigtext" v-if="refundorderDetail.state==6">等待商家确认收货</view>
					<view class="bigtext" v-if="refundorderDetail.state==4">退货已完成</view>
					<view class="bigtext" v-if="refundorderDetail.state==5||refundorderDetail.state==2">退货已取消</view>
			</view>
			<!--订单时间状态  -->
			<view class="margin_top1">
					<!-- <view class="strongtext">商家正在处理中~</view> -->
					<view class="strongtext " v-if="refundorderDetail.state==0">您已发起退款申请等待商家审核！</view>
					<!-- <view class="strongtext ">您已发起换货申请等待商家审核！</view> -->
					<view class="strongtext " v-if="refundorderDetail.state==1">卖家已同意您的申请请将商品寄回！</view>
					<view class="strongtext " v-if="refundorderDetail.state==6">商家确认收货会将您的金额退回！</view>
					<view class="strongtext " v-if="refundorderDetail.state==4">您的金额已原路退回，请注意查收！</view>
					<view class="strongtext " v-if="refundorderDetail.state==5">您已取消退款！</view>
					<view class="strongtext " v-if="refundorderDetail.state==2">卖家已拒绝您的申请！</view>
			</view>
			<!-- 寄回地址 -->
			<view class="padding ffffff radius margin_top" v-if="refundorderDetail.state==1">
				<view class="word_hh hei">寄回地址</view>
				<view class="flexleft margin_top2">
					<view class="word_baiba black margin_right3">{{refundorderDetail.shopConfig.returnName}}</view>
					<view class="word_baiba black">{{refundorderDetail.shopConfig.returnPhoneNum}}</view>
				</view>
				<view class="huisetext margin_top2">{{refundorderDetail.shopConfig.returnAddr}}</view>
			</view>
			<!-- 换货金额 -->
			<view class="padding ffffff radius margin_top flexbetween" v-if="refundorderDetail.state==0||refundorderDetail.state==2||refundorderDetail.state==5">
				<view class="word_baiba black">退款金额</view>
				<view class="qianshu">￥{{refundorderDetail.order.total_price}}</view>
			</view>
			<!-- 快递单号 -->
			<view class="padding ffffff radius margin_top" @click="show=true" v-if="refundorderDetail.state==6||refundorderDetail.state==4">
				<view class="flexbetween">
					<view class="titletext">快递公司</view>
					<view class="notitletext">{{refundorderDetail.express_name}}</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="titletext">快递单号</view>
					<view class="notitletext">{{refundorderDetail.express_no}}</view>
				</view>
			</view>
			<!-- 退货商品 -->
			<view class="ffffff padding radius margin_top" v-if="">
				 <view class="word_hh hei padding_bottom">退货商品</view>
				<view class=" xiahuax margin_top" v-for="item in refundorderDetail.goods" :key="item.id">
					<view class="flexbetween"  @click="spxq(item.goods_id)">
						<view class="shilitu">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="" style="width: 74%;">
							<view class="ershib yhxiank">{{item.title}}</view>
							<view class="jiu margin_top1 yhxiank">{{item.difference}}</view>
							<view class="flexbetween margin_top1">
								<view class="qianshu">¥{{item.price}}</view>
								<view class="shuliang">X{{item.number}}</view>
							</view>
						</view>
					</view>
					<view class="flexright margin_top">
						<!-- 退款中 -->
						<!-- 	<view class="huangsebtn margin_right2">退款中</view> -->
						<!-- 立即评价 -->
						<!-- <view class="huisebtn margin_right2" @click="estimate">立即评价</view> -->
					</view>
				</view>
			</view>
			<!-- 商品详情 -->
			<view class="paddingbom">
				<view class="ffffff padding radius margin_top">
						<view class="flexbetween margin_top">
							<view class="word_rb hei">退款原因</view>
							<view class="huisetext">{{refundorderDetail.reason}}</view>
						</view>
						<view class="flexbetween margin_top">
							<view class="word_rb hei">退货说明</view>
							<view class="huisetext">{{refundorderDetail.refund_content}}</view>
						</view>
						<!-- <view class="flexbetween margin_top">
							<view class="word_rb hei">退款金额</view>
							<view class="huisetext">￥98.00</view>
						</view> -->
						<view class="flexbetween margin_top">
							<view class="word_rb hei">退货金额</view>
							<view class="huisetext" style="color: rgba(255, 117, 16, 1);">￥{{refundorderDetail.order.total_price}}</view>
						</view>
						<view class="flexbetween margin_top">
							<view class="word_rb hei">退货编号</view>
							<view class="huisetext">{{refundorderDetail.order.order_no}}</view>
						</view>
						<view class="flexbetween margin_top">
							<view class="word_rb hei">申请时间</view>
							<view class="huisetext">{{refundorderDetail.createtime_text}}</view>
						</view>
					
				</view>
			</view>
			<!-- 固定底部 -->
			<view class="gudingdb ffffff">
			<!-- 订单state -> 1=待支付,2=待发货,3=待收货,4=待评论,6=已完成,7=已取消 -->
			<!-- refund_status -> 0=未退款,1=退款中,2=待退货,3=退款完成,4=退款关闭,5=退款被拒 -->
			<!-- 退货订单state ->  0=申请退款,1=卖家同意,2=卖家拒绝,3=申请平台介入,4=成功退款,5=退款已关闭,6=已提交物流,7=第三方退款中,8=退款失败 -->
				<view class="flexright">
						<view class="huisebtn margin_right2" @click="deletorder" v-if="refundorderDetail.state==2||refundorderDetail.state==4||refundorderDetail.state==5||refundorderDetail.state==8">删除订单</view>
					
						<!-- 取消申请 -->
						<view class="huisebtn margin_right3" @click="qxsq" v-if="refundorderDetail.state==0">取消申请</view>
						<!-- 填写单号 -->
						<view class="huangsebtn margin_right3" @click="write" v-if="refundorderDetail.state==1">填写单号</view>
					
				</view>
			</view>
		</view>
		<!-- 物流单号弹出框 -->
		<u-popup :show="show" mode="center" @close="close" @open="open" :round="15">
			<view class="text dan">
				<text class="wuliu">物流单号</text>
				<view class="zhongtong">
					<view class="">{{refundorderDetail.express_name}}</view>
					<view class="text margin_top1">{{refundorderDetail.express_no}}</view>
				</view>
				<view class="fuzhi">
					<view class="copy" @click="copy">点击复制</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show: false,
				orderID:'',// 订单 id
				refundorderDetail:{},// 退货订单详情内容
				pageShow:false
			}
		},
		onLoad(options) {
			let _this=this
			_this.orderID=options.id
		},
		onShow() {
			let _this=this
			_this.getRefundInfo()
		},
		methods: {
			spxq(id) { // 跳转详情
				let _this=this
			 	let obj = {
					goods_id: id,
					type:1,//1=普通商品,2=大礼包,3=礼券商品
					dh_code:_this.refundorderDetail.dh_code
				}
				uni.navigateTo({
					url: "/pages_home/shangpinxq?msg=" + encodeURIComponent(JSON.stringify(obj))
				})
			},
			// 获取退货订单详情
			getRefundInfo(){
				let _this=this
				httpRequest.request('api/order/getRefundInfo', 'GET', {
					id:_this.orderID,// 退货订单id
				}).then(res => {
					if(res.code==1){
						_this.refundorderDetail=res.data
						_this.pageShow=true
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 删除订单
			deletorder() {
				httpRequest.modal('提示', '确定删除当前订单吗？', true, (res) => {
					if (res) {
						httpRequest.request('api/order/delOrder', 'POST', {
							id: this.orderID,
						}, false, false, true).then(res => {
							httpRequest.toast(res.msg);
							if (res.code == 1) {
								uni.navigateBack(1)
							}
						}).catch(err => {
							httpRequest.toast(err.msg);
						})
					}
				})
			},
			// 取消申请
			qxsq(){
				httpRequest.modal('提示', '确定取消申请吗?', true, (res) => {
					if (res) {
						httpRequest.request('api/order/closeRefund', 'GET', {
							id: this.orderID,
						}, false, false, true).then(res => {
							httpRequest.toast(res.msg);
							if (res.code == 1) {
								uni.navigateBack(1)
							}
						}).catch(err => {
							httpRequest.toast(err.msg);
						})
					}
				})
			},
			// 点击复制
			copy() {
				let value = "物流名称："+this.refundorderDetail.express_name+" 单号："+this.refundorderDetail.express_no
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => {
						//复制成功的回调函数
						httpRequest.toast("复制成功")
						this.show = false
					}
				});
			},
			// 填写单号
			write() {
				uni.navigateTo({
					url: "/pages_my/tianxiedh?id="+this.orderID
				})
			},
			close() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hexiao {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.erwie {
		width: 169rpx;
		height: 169rpx;
	}

	.code {
		padding: 30rpx 30rpx;
		margin-top: 30rpx;
		background-color: #fff;
	}

	/deep/.u-safe-area-inset-bottom {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
	}

	.fuzhi {
		padding: 0rpx 100rpx;
	}

	.copy {
		padding: 20rpx 40rpx;
		border-radius: 51rpx;
		background-color: RGBA(255, 117, 16, 1);
		margin-top: 109rpx;
		color: #fff;
	}

	.dan {
		padding: 64rpx 40rpx 64rpx 40rpx;
	}

	.zhongtong {
		margin-top: 87rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		padding: 34rpx 82rpx;
		border: 1rpx solid rgba(223, 223, 223, 1);
		border-radius: 10rpx;
	}

	.wuliu {
		font-size: 40rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.strongtext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.bigtext {
		font-size: 34rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.xzqianshu {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: rgba(255, 117, 16, 1);
	}

	.huangsebtn {
		border: 2rpx solid rgba(255, 117, 16, 1);
		width: 170rpx;
		height: 67rpx;
		display: flex;
		border-radius: 120rpx;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(255, 117, 16, 1);
	}

	.huisebtn {
		border: 2rpx solid #666666;
		width: 170rpx;
		height: 67rpx;
		display: flex;
		border-radius: 120rpx;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.shuliang {
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #999999;
	}

	.ershib {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.shilitu {
		width: 134rpx;
		height: 128rpx;
		border-radius: 14rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 14rpx;
		}
	}

	.qianshu {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: rgba(255, 117, 16, 1);
	}

	.huisetext {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.yhxiank {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.paddingbom {
		padding-bottom: 200rpx;
	}
</style>